<template>
    <div id="sign-show" :class="visible?'sign-show':''">
        <div class="sign">
            <div class="sign-mask"></div>
            <div class="sign-box">
                <form id="sign-mp" style="display: block">
                    <div class="form-item">
                        <div class="erphp-weixin-scan">
                            <div class="ews-title">微信安全登录</div>
                            <div style="width: 300px;height: 300px">
                                <img :src="loginQrcode" style="width: 300px;"/>
                            </div>
                            <div class="ews-tips">打开微信扫码即可登录或注册</div>
                        </div>
                    </div>
<!--                    <div class="form-policy" style="text-align:center">-->
<!--                        <label>扫码后代表已阅读并同意<a class="active" href="" target="_blank">《用户服务协议》</a>和<a-->
<!--                                class="active" href="" target="_blank">《隐私政策》</a></label>-->
<!--                    </div>-->
                </form>
                <div class="sign-wrap" @click="loginHide">
                    <div class="sign-close">×</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "login",
        model: {
            prop: 'visible',
            event: 'change'
        },
        props: {
            visible: Boolean,
        },
        data() {
            return {
                showLogin:false,
                loginQrcode:'',
                qr_code_time:null
            };
        },
        watch: {
            visible(newName, oldName) {
                if(newName){
                    this.$apis.getLoginCode({}).then(res=>{
                        this.loginQrcode=res.records.qrcodeUrl
                        this.checkScan(res.records.key);
                    })
                }
            }
        },
        created(){

        },

        methods: {
            loginHide(){
                clearInterval(this.qr_code_time);
                this.$emit('change', false)
            },
            checkScan(key){
                clearInterval(this.qr_code_time);
                this.qr_code_time = setInterval(() => {
                    this.$apis.isLogin({key:key}).then(res=>{
                        if(res['records']){
                            clearInterval(this.qr_code_time);
                            let userInfo=res.records.user;
                            let token=userInfo.token;
                            this.$store.dispatch('user/updateUserInfo', userInfo)
                            this.$store.dispatch('user/updateToken', token)
                            this.$message.success('登录成功')
                            this.$emit('success')
                            this.loginHide();
                        }
                    })
                }, 2000);
            },
        }

    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

</style>
